<template>
	<view class="content">
		<view class="title">最近观看</view>
		<scroll-view scroll-x="true" class="scroll_content">
			<view class="scroll_item"  v-for="(item, index) in dataList" :key="index"
			v-if="item.id!=-100 && item.name!='+' "
			@click="clickToItem(item)">
			    <view class="scroll_item_coverContent">
			    	<view class="scroll_item_coverContent_cover">
			    		<image class="image" :src="item.thumbnail||item.cover" mode="aspectFill"></image>
			    	</view>
					<view class="scroll_item_coverContent_playNumber">看到{{ item.playlet_number_name }}</view>
			    </view>
				<view class="scroll_item_name">{{ item.name }}</view>
			</view>
			<view class="scroll_add_item scroll_item" v-else @click="clickToItem(item)">
				<view class="scroll_item_coverContent">
					<view class="scroll_item_coverContent_cover">
						<image class="image" src="/static/images/add-56.png" mode="aspectFill"></image>
					</view>
				</view>
				<view class="scroll_item_name">去看剧吧</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import tools from '@/utils/tools.js'
	export default {
		data() {
			return{
			}
		},	
		props: {
			dataList: {
				type: Array,
				default: function() {
					return []
				}
			}
		},
		methods: {
			clickToItem(res){
				console.log(45,res)
				if (res.id === -100 && res.name === "+") {
					uni.switchTab({
						url:'/pages/tabBar/square/square'
					})
				} else{
					let data = {playlet_id:res.playlet_id,
					            name:res.name, 
								playlet_number: res.playlet_number,
						        last_episode_number:res.last_episode_number}
					tools.jump_video_page_by_info(data)
				}
			}
		}
	}
</script>

<style lang="scss">
	.content{
		display: flex;
		box-sizing: border-box;
		flex-direction: column;
		background-color: #FFFFFF;
		width: 100%;
		margin: 30rpx 0rpx;
		border-radius: 5px;
		
		.title{
			margin: 20rpx;
			font-size: 18px;
			font-weight: 700;
			color: #3D3D3D;
		}
		
		.scroll_content{
			box-sizing: border-box;
			flex-direction: row;
			white-space: nowrap;
			padding-left: 30rpx;
			
			.scroll_item {
				display: inline-block;
				width: 160rpx;
				margin-right: 30rpx;
				margin-bottom: 30rpx;
				
				.scroll_item_coverContent{
					position: relative;
					display: flex;
					box-sizing: border-box;
					
					.scroll_item_coverContent_cover{
						flex-shrink: 0;
						width: 160rpx;
						height: 208rpx;
						border-radius: 10rpx;
						.image{
							width: 100%;
							height: 100%;
							border-radius: 10rpx;
						}
					}
					
					.scroll_item_coverContent_playNumber{
						position: absolute;
						left: 0;
						bottom: 0;
						width: 160rpx;
						height: 50rpx;
						line-height: 50rpx;
						border-bottom-left-radius: 10rpx;
						border-bottom-right-radius: 10rpx;
						font-size: 12px;
						text-align: center;
						color: #ffffff;
			            background-color: rgba(0, 0, 0, 0.7);
					}
				}
				
				.scroll_item_name{
					font-size: 15px;
					font-weight: 500;
					color: #3D3D3D;
					margin-top: 12rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
						
			.scroll_add_item{
				.scroll_item_coverContent{
					.scroll_item_coverContent_cover{
						display: flex;
						justify-content: center;
						align-items: center;
						background-color: #EFEFEF;
						.image{
							width: 56rpx;
							height: 56rpx;
						}
					}
				}
			}
		}
		
	}
</style>